
<template>
  <div class="menu-wrapper">
    <el-form ref="shopForm" :model="form" label-width="100px">
      <div
        style="
          width: 100%;
          display: flex;
          align-items: flex-end;
          border-bottom: 1px #eee solid;
          margin-bottom: 20px;
        "
      >
        <span style="font-size: 18px; color: #409eff; margin: 10px 0"
          >修改达人信息</span
        >
      </div>
      <el-form-item label="达人昵称" prop="name">
        <el-col :span="8">
          <el-input v-model="form.name" />
        </el-col>
      </el-form-item>
        <el-form-item label="达人头像" prop="avatar">
        <!-- <el-col :span="8">
          <el-input v-model="form.name" />
        </el-col> -->
           <single-upload style="width: 145px" v-model="form.avatar" />
      </el-form-item>
        <!-- <el-form-item label="关注人数" prop="follow">
        <el-col :span="8">
          <el-input v-model="form.follow" />
        </el-col>
      </el-form-item>
        <el-form-item label="粉丝人数" prop="love">
        <el-col :span="8">
          <el-input v-model="form.love" />
        </el-col>
      </el-form-item> -->




      <div class="complete">
        <el-form-item>
          <el-button
            type="primary"
            :loading="clicked"
            @click="editscenic('shopForm')"
            >&nbsp&nbsp完 成&nbsp&nbsp</el-button
          >
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<style scoped>
.complete {
  margin-top: 40px;
  margin-left: -60px;
}
.second .el-form-item label {
  text-align: left !important;
}
.menu-wrapper {
  margin: 15px;
}
.photo-content {
  width: 100%;
  /* display: flex;
  align-items: flex-end; */
  margin-left: 50px;
  margin-bottom: 40px;
}
.photo-content .photo-content-span {
  margin-bottom: 20px;
}
/deep/.el-upload__tip {
  display: none;
}
/deep/ .el-upload--picture-card {
  width: 50px !important;
  height: 50px !important;
  line-height: 50px !important;
  text-align: center;
}
.video-content {
  margin-left: 40px;
  margin-top: 60px;
  margin-bottom: 40px;
}
.video-content-span {
  margin-bottom: 20px;
}
.secific {
  margin-top: 30px;
}
.el-form-item__content {
  margin-top: 50px;
  margin-left: -50px;
}
</style>
<script>
import MultiUpload from "@/components/Upload/multiUpload";  //轮播图组件
import VideoUpload from "@/components/Upload/videoUpload";   //视频组件
import SingleUpload from "@/components/Upload/singleUpload"; //缩略图
import permission from "@/directive/permission/index.js"; // 权限判断指令
import { EventBus } from "@/api/eventBus";
import utils from "../../utils/utils.js";
import { find, update } from "@/api/talent";
import Tinymce from "@/components/Tinymce";   //菜谱介绍
export default {
    name: "variety-edit",

  filters: {},
  components: {
    MultiUpload,
    VideoUpload,
    SingleUpload,
    Tinymce,
  },
  data() {
    return {
           options: [
        {
          value: 1,
          label: "1",
        },
        {
          value: 2,
          label: "2",
        },
        {
          value: 3,
          label: "3",
        },
        {
          value: 4,
          label: "4",
        },
        {
          value: 5,
          label: "5",
        },
      ],
      id: "",
      clicked: false, // 按钮防双击
      form: {
        name:''
        
      },
    };
  },
  created() {
    this.getData();
  },
  activated() {},
    watch: {
      // 路由地址不变的情况下,如果id变化则重新获取数据
      $route(newVal, oldVal) {
        console.log(newVal);
        if (newVal.name == "talent-edit" && newVal.query.id != this.id) {
          this.getData();
        }
      },
    },
  methods: {

    getData() {
      this.id = this.$route.query.id;
      const _this = this;
      find(_this.id)
        .then((response) => {
            console.log(response);
          _this.form = response.data.talent;
          console.log(_this.form);
        })
        .catch((error) => {});
    },

    editscenic(form) {
      const _this = this;
      this.$refs[form].validate((valid) => {
        if (valid) {
          // 校验表单
          _this.clicked = true;
          update(_this.form)
            .then((response) => {
              console.log(response);

              _this.clicked = false;

              EventBus.$emit("talent-edit", response.data);
              _this.$store
                .dispatch("tagsView/delView", _this.$route)
                .then(({ visitedViews }) => {
                  _this.$router.push({
                    path: "/talent/list",
                  });
                }); // 关闭当前tab回到列表
            })
            .catch((error) => {
              _this.clicked = false;
            });
        } else {
          return false;
        }
      });
    },
  },
};
</script>
